<template>
  <div>
    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">店长提成配置</div>
        <div class="op_right">
          <button class="primary_button" @click="handleAdd">新建配置</button>
        </div>
      </div>

      <div class="table_list">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="salaryUp" label="上限金额"> </el-table-column>
          <el-table-column prop="salaryUpType" label="上限类型">
            <template slot-scope="scope">
              <span>{{ MoneyUpType[scope.row.salaryUpType] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="salaryAward"
            label="提成比例"
          ></el-table-column>
          <el-table-column prop="date" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="text" @click="dele(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 新增规则 -->
      <el-dialog
        :visible.sync="RechcomdialogVisible"
        width="500px"
        :title="title"
        class="no-dialog-padding"
        :before-close="handleClose"
      >
        <span>
          <div class="AddRules_box">
            <el-form
              ref="SalaryForm"
              :rules="AddRules"
              :model="SalaryForm"
              label-position="top"
            >
              <el-row>
                <el-form-item label="贡献值上限" prop="salaryUp">
                  <div class="Rules_form_box">
                    <div class="Rules_form_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="SalaryForm.salaryUp"
                        class="up_ipt text-left"
                        :precision="2"
                        :min="0"
                        :max="100000000"
                        :controls="false"
                      ></el-input-number>
                    </div>
                    <div class="Rules_form_select">
                      <el-select
                        v-model="SalaryForm.salaryUpType"
                        placeholder="请选择"
                        class="w-120"
                      >
                        <el-option
                          v-for="item in MoneyUpTypeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="提成比例" prop="salaryAward">
                  <el-input-number
                    v-model="SalaryForm.salaryAward"
                    placeholder="请输入"
                    :precision="2"
                    :step="2"
                    :min="0"
                    :controls="false"
                    class="w-100 text-left"
                  ></el-input-number>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="AddRulesSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getSalaryConfPage,
  CreateSalaryConfPage,
  UpdateSalaryConfPage,
  getSalaryConfInfo,
  DeleteSalaryConfPage,
} from "@/api/bpm/Storesalary";
export default {
  name: "EryuoaStoreAddrules",

  data() {
    return {
      RechcomdialogVisible: false,
      loading: false,
      activeIndex: 1,
      currentIndex: 1,
      tableData: [],
      StoreSlist: [],
      title: "",
      value: "",
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        salaryType: "PO_AWARD",
      },

      total: 0,

      AddRules: {
        salaryUp: [{ required: true, message: "请输入", trigger: "blur" }],
        salaryAward: [
          { required: true, message: "请输入金额", trigger: "blur" },
        ],
      },

      // 上限类型
      MoneyUpType: {
        LE: "<",
        EL: "≤",
      },

      // 下限类型
      MoneyDownType: {
        UP: ">",
        EU: "≥",
      },

      MoneyUpTypeOptions: [
        {
          value: "LE",
          label: "<",
        },
        {
          value: "EL",
          label: "≤",
        },
      ],

      SalaryForm: {
        salaryAward: "", // 提成比例
        salaryUp: "", // 贡献值上限
        salaryId: "", // 薪资配置标识
        salaryType: "PO_AWARD",
      },
    };
  },

  created() {},

  mounted() {},

  methods: {
    // 获取详情
    getStoresInfos(row) {
      let id = row.salaryId;
      getSalaryConfInfo({ id: id })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            let {
              salaryAward,
              salaryDesc,
              salaryName,
              salaryUp,
              salaryUpType,
              salaryType,
              salaryLevel,
              salaryId,
            } = data;

            this.SalaryForm = {
              salaryAward: salaryAward,
              salaryDesc: salaryDesc,
              salaryName: salaryName,
              salaryUp: salaryUp,
              salaryType: salaryType,
              salaryUpType: salaryUpType,
              salaryLevel: salaryLevel,
              salaryId: salaryId,
            };
          }
        })
        .catch((err) => {});
    },

    resQ() {
      this.queryParams.pageNo = 1;
      this.total = 0;
      this.tableData = [];
      this.getList();
    },
    handleClose() {
      this.resetFormData("SalaryForm");
      this.SalaryForm.confId = "";
      this.$nextTick(() => {
        this.RechcomdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    // 确定
    AddRulesSubmit() {
      if (!this.SalaryForm.salaryUpType) {
        this.$message({
          type: "error",
          message: "请选择贡献值上限类型",
        });
        return false;
      }
      this.$refs["SalaryForm"].validate((valid) => {
        if (valid) {
          if (!this.SalaryForm.salaryId) {
            this.NewRecharge();
          } else {
            this.EditRecharge();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 新建
    NewRecharge() {
      CreateSalaryConfPage(this.SalaryForm)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.handleClose();
          }
        })
        .catch((err) => {});
    },

    // 编辑
    EditRecharge() {
      const {
        salaryAward,
        salaryDesc,
        salaryName,
        salaryUp,
        salaryType,
        salaryUpType,
        salaryLevel,
        salaryId,
      } = this.SalaryForm;
      UpdateSalaryConfPage({
        salaryAward: salaryAward,
        salaryDesc: salaryDesc,
        salaryName: salaryName,
        salaryUp: salaryUp,
        salaryType: salaryType,
        salaryUpType: salaryUpType,
        salaryLevel: salaryLevel,
        salaryId: salaryId,
      })
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getList();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.handleClose();
          }
        })
        .catch((err) => {});
    },

    // 充值提成
    getList() {
      this.loading = true;
      getSalaryConfPage(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.tableData = data.list;
            this.total = data.total;
            if (data.list.length === 0 && this.queryParams.pageNo > 1) {
              this.queryParams.pageNo = this.queryParams.pageNo - 1;
              this.getList();
            }
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    // 列表 删除
    dele(row) {
      this.$confirm("提成配置删除后无法撤销, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteSalaryConfPage({ id: row.salaryId }).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {});
    },

    handleAdd() {
      this.RechcomdialogVisible = true;
      this.SalaryForm.salaryId = "";
      this.title = "添加提成配置";
    },

    edit(row) {
      this.RechcomdialogVisible = true;
      this.title = "修改提成配置";
      this.getStoresInfos(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}

.check {
  font-size: 12px;
  color: #0052d9;
}

.list_Stores {
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  .list_Stores_item {
    height: 46px;
    line-height: 46px;
    background: #ffffff;
    padding-left: 47px;
    border-bottom: 1px solid #e7e7e7;
  }
}

.AddRules_box {
  padding: 0 24px;
  .Rules_form_box {
    display: flex;
    .Rules_form_select {
      margin-right: 10px;
    }
  }
}

.radio_box {
  display: flex;
  margin-bottom: 10px;
}

.up_ipt {
  width: 300px;
  margin-right: 20px;
}
.down_ipt {
  width: 300px;
  margin-left: 10px;
}
.percentIcon {
  position: absolute;
  top: 55px;
  right: -15px;
}
</style>
